<!DOCTYPE html>

<html>

	<head>
		
		<!-- Title -->
		<title>Register - CheerApp HTML Template Demo</title>
		
		<!-- Meta tags -->
		<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
		
		<!-- CSS -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/light-blue.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="css/prettyPhoto.css" />
		
		<!-- JavaScript -->
		<script src="js/forms.js" type="text/javascript"></script>
		<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
		<script src="js/royal.js" type="text/javascript"></script>
		
		<script type="text/javascript">
			document.documentElement.className += 'js-ready';
			
			H5F.listen(window,"load",function () {
				H5F.setup(document.getElementById("register-form"), {
    				validClass: "valid",
    				invalidClass: "invalid",
    				requiredClass: "required",
    				placeholderClass: "placeholder"
				});
			},false);
		</script>		
		
		<!-- IE scripts and stylesheets -->
		<!--[if lt IE 9]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
			<script src="js/iefixes.js" type="text/javascript"></script>
		<![endif]-->
		
		
	
	</head>
	
	
	<body>
	
		<div id="wrap">
		
			<header id="header">
				<div class="inner-wrap clearfix">
				
					<h1 id="logo">
						<a href="index.html">CheerApp - Premium HTML App Template - Demo</a>
					</h1>
					
					<nav class="dropdown">
						<ul id="nav" class="clearfix">
							<li>
								<a href="index.html">Home</a>
							</li>
							<li>
								<a href="#">Features</a>
								<ul>
									<li><a href="4-column-pricing.html">Pricing&nbsp;tables</a>
										<ul>
											<li><a href="3-column-pricing.html">Three&nbsp;columns</a></li>
											<li><a href="4-column-pricing.html">Four&nbsp;columns</a></li>
											<li><a href="5-column-pricing.html">Five&nbsp;columns</a></li>
										</ul>
									</li>
									<li><a href="wiki.html">Knowledgebase</a>
										<ul>
											<li><a href="wiki-single.html">Single&nbsp;article</a></li>
											<li><a href="wiki.html">Archive</a></li>
										</ul>
									</li>
									<li><a href="register.html">Registration&nbsp;Form</a></li>
									<li><a href="elements.html">Styling&nbsp;demos</a></li>
								</ul>
							</li>
							<li><a href="wiki.html">Knowledgebase</a>
								<ul>
									<li><a href="wiki-single.html">Single&nbsp;article</a></li>
									<li><a href="documentation/index.html">Documentation</a></li>
									<li><a href="contact.html">Contact&nbsp;support</a></li>
								</ul>
							</li>
							<li><a href="4-column-pricing.html">Pricing</a>
								<ul>
									<li><a href="3-column-pricing.html">Three&nbsp;columns</a></li>
									<li><a href="4-column-pricing.html">Four&nbsp;columns</a></li>
									<li><a href="5-column-pricing.html">Five&nbsp;columns</a></li>
								</ul>
							</li>
							<li><a href="blog.html">Blog</a>
								<ul>
									<li><a href="blog-single.html">Single&nbsp;post</a></li>
									<li><a href="blog.html">Monthly&nbsp;archives</a></li>
								</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul><!-- end #nav -->
					</nav>
					
					<div class="login">
						
						<!-- Use "user-info" div once the user has logged in and hide the login/register links and login form -->
						<!--						
						<div class="user-info">
							<p>Logged in as <span class="username">Username</span> <a class="logout" href="#">(logout)</a></p>
						</div>
						-->
						
						<ul class="login-links">
							<li><a href="register.html">Register</a></li>
							<li><a class="login-link" href="#">Login</a></li>
						</ul><!-- end .login-links -->
						
						<form id="login-form" method="post" action="#">
						
							<p>
								<label for="username">Username</label>
								<input name="username" value="" id="username" type="text" required placeholder="Username" />
							</p>
							<p>
								<label for="password">Password</label>
								<input name="password" value="" id="password" type="password" required placeholder="Password" />
							</p>
							<p class="forgot"><a href="#">Forgot?</a></p>
							<p>
								<input class="login-submit" type="submit" value="Login" name="submit" />
							</p>
						
						</form>
						
					</div><!-- end #login -->
					
				</div><!-- end .inner-wrap -->
			</header><!-- end header -->
			
			
			<div id="featured">
				<div class="inner-wrap">
				
					<div class="breadcrumb">
						<h2>
							Register
						</h2>
					</div>
					
					<form id="searchform" method="get" action="search.html" class="clearfix">
						<p>
							<input type="text" value="" name="s" id="s" placeholder="Start searching..." autocomplete="off" />
						</p>
						<p>
							<input type="submit" id="searchsubmit" value="" />
						</p>
					</form>
				
				</div><!-- end .inner-wrap -->
			</div><!-- end #featured -->
			
			
			<div id="main">
				<div class="inner-wrap clearfix">
				
					<div class="content content-left">
						
						<form id="register-form" class="form-alt" method="post" action="#">
						
							<fieldset>
								<legend class="description">
									<h4>Account details</h4>
									<small>(all fields are required)</small>
								</legend>
								<p class="register-form-input">
									<label for="plan">Choose plan</small></label>
									<select name="plan" id="plan" required >
										<option value=""> Select... </option>
										<option value="free"> Free plan ($0/month) </option>
										<option value="standard"> Standard plan ($35/month) </option>
										<option value="proffessional"> Proffessional plan ($100/month) </option>
										<option value="developer"> Developer plan ($300/month) </option>
									</select>
								</p>
								<p class="register-form-input">
									<label for="username">Username</small></label>
									<input type="text" size="30" value="" name="username" id="username" required />
								</p>
								<div class="register-form-input input-small clearfix">
									<p class="input-left">
										<label for="password">Password</small></label>
										<input type="password" size="30" value="" name="password" id="password" required />
									</p>
									<p class="input-right">
										<label for="confirm">Confirm password</small></label>
										<input type="password" size="30" value="" name="confirm" id="confirm" required />
									</p>
								</div>
								<p class="register-form-input">
									<label for="email">E-mail address</small></label>
									<input type="email" size="30" value="" name="email" id="email" required />
								</p>
								<div class="register-form-input input-small clearfix">
									<p class="input-left">
										<input type="checkbox" value="registerdomain" name="register-domain" id="register-domain">
										<label for="register-domain">Register domain</label>
									</p>
									<p class="input-left mr20">
										<label for="domain">Domain name</small></label>
										<input type="text" size="30" value="" name="domain" id="domain" />
									</p>
									<p class="input-right" id="domain-ext">
										<label for="domain2">&nbsp;</small></label>
										<select name="domain2" id="domain2">
											<option value="com">.com</option>
											<option value="net">.net</option>
											<option value="eu">.eu</option>
											<option value="org">.org</option>
											<option value="co.uk">.co.uk</option>
											<option value="us">.us</option>
											<option value="gov">.gov</option>
										</select>
									</p>
								</div>
							</fieldset>
							
							<hr />
							
							<fieldset>
								<legend class="description">
									<h4>Billing info</h4>
									<small>(all fields are optional)</small>
								</legend>
								<div class="register-form-input input-small clearfix">
									<p class="input-left">
										<label for="first">First name</small></label>
										<input type="text" size="30" value="" name="first" id="first" />
									</p>
									<p class="input-right">
										<label for="last">Last name</small></label>
										<input type="text" size="30" value="" name="last" id="last" />
									</p>
								</div>
								<p class="register-form-input">
									<label for="address1">Address line 1</small></label>
									<input type="text" size="30" value="" name="address1" id="address1" />
								</p>
								<p class="register-form-input">
									<label for="address2">Address line 2</small></label>
									<input type="text" size="30" value="" name="address2" id="address2" />
								</p>
							</fieldset>
							
							<p class="button button-arrow">
								<input type="submit" id="submit" name="submit" value="Sign up" />
								<span class="icon"></span>
							</p>
						</form><!-- end #register-form -->
						
					</div><!-- end .content -->
					
					
					<div class="sidebar">
						
						<div class="widget">
							<h6>About membership</h6>
							<div class="widget-content">
								<p>
									CheerApp membership provides exclusive access to forums, support center and lore ipsum dolor.
								</p>
								<p>
									Premium membership grats additional lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec odio erat. Donec egestas enim ut nisl blandit.
								</p>
							</div><!-- end .widget-content -->
						</div><!-- end .widget -->
						
						<div class="widget">
							<h6>Lorem ipsum dolor</h6>
							<div class="widget-content">
								<p>
									Duis nec odio erat. Donec egestas enim ut nisl blandit, support center and lorem ipsum dolor.
								</p>
							</div><!-- end .widget-content -->
						</div><!-- end .widget -->
					
					</div><!-- end .sidebar -->
					
				</div><!-- end .inner-wrap -->
			</div><!-- end #main -->
		
		</div><!-- end #wrap -->
		
		
		<footer id="footer">
			<div class="inner-wrap">
			
				<nav>
					<ul id="footer-nav" class="clearfix">
						<li><a href="index.html">Home</a></li>
						<li><a href="4-column-pricing.html">Sign up</a></li>
						<li><a href="#">Legal</a></li>
						<li><a href="wiki.html">Support</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</nav>
				
				<!-- Set margin-top on logo to negative half of image height (to center it vertically) in CSS (.footer-logo) -->
				<a href="index.html"><img class="footer-logo" src="images/light-blue/logo-small.png" width="107" height="39" alt="logo" /></a>
				
				<small class="copyright">&copy;2011&nbsp;&nbsp;&middot;&nbsp;&nbsp;CheerApp HTML template by <a href="http://themeforest.net/user/pogoking?ref=pogoking">Mateusz Hajdziony</a></small>
			
			</div>
		</footer><!-- end footer -->
	
	</body>

</html>